import 'package:flutter/material.dart';

class TextFieldPage extends StatefulWidget {
  TextFieldPage({Key key}) : super(key: key);

  @override
  _TextFieldPageState createState() => _TextFieldPageState();
}

class _TextFieldPageState extends State<TextFieldPage> {

  var _username = new TextEditingController();//初始化时给表单赋值
  var _password;

  @override
  void initState() {
    super.initState();
    _username.text = '初始值';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('表单演示页面'), 
      ), 
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: <Widget>[
            TextField(
              decoration: InputDecoration(
                hintText: '请输入用户名' 
              ),
              controller: _username, //默认加载初始值 
              onChanged: (value) {
                setState(() {
                  _username.text = value;
                }); 
              },
            ),
            SizedBox(height:10),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                hintText: '请输入密码' 
              ),
              onChanged: (value) {
                setState(() {
                  this._password = value;
                }); 
              },
            ),
            SizedBox(height:20),
            Container(
              width: double.infinity,
              height: 40,
              child: RaisedButton(
                child: Text('登录'),
                color: Colors.blue,
                textColor: Colors.white,
                onPressed: () {
                  print("用户名：${this._username.text}，密码：${this._password}");
                }
              ), 
            )
          ], 
        )
      ),
    );
  }
}

class TextDemo extends StatelessWidget {
  const TextDemo({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
          children: <Widget>[
            TextField(),
            SizedBox(height:20),
            TextField(
              decoration: InputDecoration(
                hintText: '请输入关键字',
                border: OutlineInputBorder()
              ), 
            ),
            SizedBox(height:20),
            TextField(
              maxLines: 4,
              decoration: InputDecoration(
                hintText: '多行文本框',
                border: OutlineInputBorder()
              ), 
            ),
            SizedBox(height:20),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                hintText: '密码框',
                border: OutlineInputBorder()
              ), 
            ),
            SizedBox(height:20),
            TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: '用户名'
              ), 
            ),
            SizedBox(height:20),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: '密码'
              ), 
            ),
            SizedBox(height:20),
            TextField(
              decoration: InputDecoration(
                icon: Icon(Icons.people),
                hintText: '请输入用户名'
              ), 
            )
          ], 
        ),
    );
  }
}